<template>
    <div class="container">
        <div class="tab">
            <el-button type="primary" @click="openNewDialog"> 新增 </el-button>
            <el-button type="danger" @click="deleteData"> 删除 </el-button>
            <el-button type="primary" @click="openUpdateDialog"> 编辑 </el-button>
        </div>
        <AppPageTable
            stripe
            size="small"
            :data="data.data"
            :autostyle="'height: calc(100% - 40px);'"
            :option="data.options"
            @change="getList()">
            <el-table-column type="selection" fixed="left" width="50"> </el-table-column>
            <el-table-column show-overflow-tooltip label="提单号" prop="hblNo">
                <!-- <template #default="scope">
          <el-button link @click="openUpdateDialog(scope.row)">
            {{ scope.row.hblNo }}
          </el-button>
        </template> -->
            </el-table-column>
            <el-table-column show-overflow-tooltip label="品名描述" prop="cargoDescription">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="件数" prop="digit"> </el-table-column>
            <el-table-column show-overflow-tooltip label="单位" prop="packageUom">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="毛重" prop="grossWeight">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="体积" prop="volume"> </el-table-column>
            <el-table-column show-overflow-tooltip label="付款方式" prop="payment">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="发货人" prop="hblShipperMemo">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="收货人" prop="hblConsigneeMemo">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="通知人" prop="hblNotifyMemo">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="海外代理" prop="overseaAgentMemo">
            </el-table-column>
        </AppPageTable>
        <docDetailhblDialog
            v-model:show="dialog.show"
            :allData="alldata"
            :formData="formData"
            :loading="dialog.loading"
            :initOption="initOption"
            @saveSuccess="handleSaveSuccess($event)">
        </docDetailhblDialog>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import docDetailhblDialog from './docDetailhblDialog.vue'
export default defineComponent({
    components: {
        AppPageTable,
        docDetailhblDialog,
    },
    props: {
        //表格数据
        detailData: {
            type: Object,
            default: () => {},
        },
        //全部数据
        alldata: {
            type: Object,
            default: () => {},
        },
        //初始化option
        initOption: {
            type: Object,
            default: () => {},
        },
    },
    emits: ['update:detailData', 'changeVersion'],
    computed: {
        data: {
            get() {
                return this.detailData
            },
            set(value) {
                this.$emit('update:detailData', value)
            },
        },
    },
    data() {
        return {
            formData: {
                id: null,
                custId: null,
                cargoDescription: null, //品名描述
                digit: null, //件数
                docId: null,
                doccode: null, //业务编号
                grossWeight: null, //毛重
                hblNo: null, //提单号
                hblSecondNotifyMemo: null, //货代提单-第二通知人详细信息
                hblConsigneeMemo: null, //货代提单-收货人详细信息
                hblNotifyMemo: null, //货代提单-通知人详细信息
                hblShipperMemo: null, //货代提单-发货人详细信息
                marks: null,
                overseaAgentMemo: null, //海外代理详细信息
                packageUom: null, //单位
                payment: null, //付款方式
                volume: null, //体积
                portDepartureLabel: null,
                portDepartureId: null, //数据只为显示 装货港
                portDepartureName: null, //数据只为显示
                portTransportLabel: null,
                portTransportId: null, //数据只为显示 中转港
                portTransportName: null, //数据只为显示
                portDestinationtLabel: null,
                portDestinationId: null, //数据只为显示 目的港
                portDestinationName: null, //数据只为显示
                vessel: null,
                voyage: null,
                detailList: [],
                docWorkCtnList: [],
            },
            dialog: {
                show: false,
                btnLoading: false,
                loading: false,
            },
        }
    },
    methods: {
        openNewDialog() {
            this.dialog.show = true
            let data = {
                id: null,
                custId: null,
                cargoDescription: null, //品名描述
                digit: 0, //件数
                docId: this.alldata.id, //业务编号
                doccode: this.alldata.doccode, //业务编号
                grossWeight: 0, //毛重
                hblNo: this.alldata.blNo ? this.alldata.blNo : null, //提单号
                hblSecondNotifyMemo: null, //货代提单-第二通知人详细信息
                hblConsigneeMemo: null, //货代提单-收货人详细信息
                hblNotifyMemo: null, //货代提单-通知人详细信息
                hblShipperMemo: null, //货代提单-发货人详细信息
                marks: this.alldata.marks, //数据只为显示 唛头
                overseaAgentMemo: null, //海外代理详细信息
                packageUom: null, //单位
                payment: null, //付款方式
                volume: 0, //体积
                portDepartureLabel: this.initOption.zhgOption.length
                    ? this.initOption.zhgOption[0].label
                    : '',
                portDepartureId: this.alldata.portDepartureId, //数据只为显示 装货港
                portDepartureName: this.alldata.portDepartureName, //数据只为显示
                portTransportLabel: this.initOption.zzgOption.length
                    ? this.initOption.zzgOption[0].label
                    : '',
                portTransportId: this.alldata.portTransportId, //数据只为显示 中转港
                portTransportName: this.alldata.portTransportName, //数据只为显示
                portDestinationtLabel: this.initOption.mdgOption.length
                    ? this.initOption.mdgOption[0].label
                    : '',
                portDestinationId: this.alldata.portDestinationId, //数据只为显示 目的港
                portDestinationName: this.alldata.portDestinationName, //数据只为显示
                vessel: this.alldata.vessel, //数据只为显示 船名
                voyage: this.alldata.voyage, //数据只为显示 航次
                detailList: [],
                docWorkCtnList: [],
                docVersion: this.alldata.version,
            }
            this.formData = data
        },
        openUpdateDialog() {
            if (this.data.options.selected.length < 1 || this.data.options.selected.length > 1) {
                this.$message.info('请选择某一条数据')
                return
            }
            this.$http
                .get('/api/docworkhbill/getEntity', {
                    id: this.data.options.selected[0].id,
                })
                .then((res) => {
                    if (res.status) {
                        this.formData = res.data
                        this.formData.portDepartureName = this.alldata.portDepartureName
                        this.formData.portDepartureLabel = this.initOption.zhgOption.length
                            ? this.initOption.zhgOption[0].label
                            : ''
                        this.formData.portTransportName = this.alldata.portTransportName
                        this.formData.portTransportLabel = this.initOption.zzgOption.length
                            ? this.initOption.zzgOption[0].label
                            : ''
                        this.formData.portDestinationName = this.alldata.portDestinationName
                        this.formData.portDestinationtLabel = this.initOption.mdgOption.length
                            ? this.initOption.mdgOption[0].label
                            : ''
                        this.formData.vessel = this.alldata.vessel
                        this.formData.voyage = this.alldata.voyage
                        this.formData.marks = this.alldata.marks
                        this.formData.docVersion = this.alldata.version
                        this.formData.doccode = this.alldata.doccode
                        this.dialog.show = true
                        console.log(this.alldata, ' this.alldata')
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        deleteData() {
            let deleteIndex = []
            this.data.options.selected.forEach((t) => {
                deleteIndex.push(t.id)
            })
            this.$http
                .post('/api/docworkhbill/deleteWorkhbill', {
                    rowids: deleteIndex,
                    docVersion: this.alldata.version,
                })
                .then((res) => {
                    if (res.status) {
                        this.getTableData()
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        getTableData() {
            this.data.options.loading = true
            this.$http
                .get('/api/docworkhbill/query', {
                    DocId: this.$route.query.id,
                    PageIndex: 1,
                    PageSize: 10,
                })
                .then((res) => {
                    this.data.data = res.content
                    this.data.options.total = res.totalElements
                })
                .finally(() => (this.data.options.loading = false))
        },
        /**
         * 保存后刷新
         */
        handleSaveSuccess(e) {
            this.getTableData()
            this.$emit('changeVersion', e)
        },
    },
    mounted() {},
})
</script>

<style lang="scss" scoped>
.container {
    padding: 0 16px;
    height: 100%;

    .tab {
        margin-bottom: 12px;
    }

    .table {
        flex: 1;
    }
}
</style>
